<template>
  <!-- 直播报名 -->
  <div class="streamingAllBackDetail" id="streamingAllBackDetail">
    <Header></Header>
    <!--本来应该是导航，（方便全局替换）-->
    <!-- <HHeader></HHeader> -->
    <div class="streamingAllBackDetail_cont">
      <div class="streamingAllBackDetail_cont_crumbs">
        <span>
          <router-link :to="{name:'home'}">首页</router-link>
        </span>
        <i class="iconfont icon-youjiantou"></i>
        <span>
          <router-link :to="{name:'streaming'}">直播课堂</router-link>
        </span>
        <i class="iconfont icon-youjiantou"></i>
        <span>
          <router-link :to="{name:'streamingAllBack'}">直播课堂列表</router-link>
        </span>
        <i class="iconfont icon-youjiantou"></i>
        <span>
          <a>直播回放</a>
        </span>
      </div>
      <!-- 普通大课 -->
      <div class="streamingAllBackDetail_contB">
        <div class="streamingAllBackDetail_cont_main">
          <div class="streamingAllBackDetail_cont_main_video">
            <div class="streamingAllBackDetail_cont_main_video_video">
              <video src ref="video" controls id="streamingAllBackDetail_cont_main_video_video"></video>
              <div class="streamingAllBackDetail_cont_main_video_video_cover">
                <div class="streamingAllBackDetail_cont_main_video_video_cover_img"></div>
                <div class="streamingAllBackDetail_cont_main_video_video_cover_cover"></div>
                <div
                  class="streamingAllBackDetail_cont_main_video_video_cover_btn"
                  @click="playervideo()"
                >
                  <i class="iconfont icon-bofang1"></i>
                </div>
              </div>
            </div>
            <div class="streamingAllBackDetail_cont_main_video_menu">
              <ul class="streamingAllBackDetail_cont_main_video_menu_one">
                <li
                  v-for="(item,index) in courmunulist"
                  :key="index"
                  @click="playback(item.OneToOne,item.OpenId,item.Title,index)"
                  :class="{courmunuactive:courmunuactive == item.OpenId}"
                >
                  <p>
                    <span class="streamingAllBackDetail_cont_main_video_menu_left">回放</span>
                    <span v-html="item.Title"></span>
                  </p>
                </li>
              </ul>
              <ul class="streamingAllBackDetail_cont_main_video_menu_two" v-show="isShowovo">
                <li
                  v-for="(item,index) in courmunulistovo"
                  :key="index"
                  @click="playovoback(item,index)"
                  :class="{courmunuovoactive:courmunuovoactive == index}"
                >
                  <p>
                    <span class="streamingAllBackDetail_cont_main_video_menu_left">回放</span>
                    <span v-html="item.Title"></span>
                  </p>
                </li>
              </ul>
            </div>
            <div style="clear:both;"></div>
          </div>
          <div class="streamingAllBackDetail_cont_main_info">
            <div class="streamingAllBackDetail_cont_main_info_tit">
              <p>
                <span v-html="this.courmunulistdetail.CourseName"></span>
                <span v-if="this.courmunulistdetail.IsApply == false">试看5分钟</span>
              </p>
              <p>
                <span>{{this.huifmenuTitle}}</span>
              </p>
            </div>
            <div
              class="streamingAllBackDetail_cont_main_info_btn"
              @click="streamingcourse()"
            >预约下期直播课</div>
          </div>
        </div>
      </div>

      <div class="streamingAllBackDetail_cont_body">
        <div class="streamingAllBackDetail_cont_body_main">
          <div class="streamingAllBackDetail_cont_body_left">
            <div class="streamingAllBackDetail_cont_body_left_tab">
              <ul>
                <li :class="{stretab:stretab === 0}" @click="stretab = 0">
                  <a>课程概述</a>
                </li>
                <li :class="{stretab:stretab === 1}" @click="stretab = 1">
                  <a @click="getCoursemenu()">目录</a>
                </li>
                <div style="clear:both;"></div>
              </ul>
            </div>
            <div class="streamingAllBackDetail_cont_body_left_tab_cont" v-show="stretab == 0">
              <p class="streamingAllBackDetail_cont_body_left_tab_cont_tet">专家介绍</p>
              <div class="streamingAllBackDetail_cont_body_left_tab_cont_swiper wepcexpert">
                <div class="swiper-container">
                  <div class="swiper-wrapper">
                    <div
                      class="swiper-slide"
                      v-for="(item,index) in coursedescribecont"
                      :key="index"
                      @click="tomrexpert(item)"
                    >
                      <div class="streamingAllBackDetail_cont_body_left_tab_cont_swiper_info">
                        <div class="streamingAllBackDetail_cont_body_left_tab_cont_swiper_info_img">
                          <img :src="item.HeadPicPath" alt />
                        </div>
                        <div
                          class="streamingAllBackDetail_cont_body_left_tab_cont_swiper_info_cont"
                        >
                          <p>
                            <a :title="item.Name">{{item.Name}}</a>
                          </p>
                          <p v-html="item.Introduce">
                            <a :title="item.Introduce"></a>
                          </p>
                        </div>
                        <div style="clear:both;"></div>
                      </div>
                    </div>
                  </div>
                  <div class="swiper-pagination"></div>
                  <div class="swiper-button-next">
                    <i class="iconfont icon-arrow-right"></i>
                  </div>
                  <div class="swiper-button-prev">
                    <i class="iconfont icon-zuojiantou"></i>
                  </div>
                </div>
              </div>
              <div class="moexpert">
                <ul>
                  <li v-for="(item,index) in coursedescribecont" :key="index">
                    <div class="moexpert_exrtpimg">
                      <img :src="item.HeadPicPath" alt />
                    </div>
                    <p>
                      <a :title="item.Name">{{item.Name}}</a>
                    </p>
                    <p v-html="item.Introduce">
                      <a :title="item.Introduce"></a>
                    </p>
                  </li>
                  <div style="clear:both;"></div>
                </ul>
              </div>
              <div class="streamingAllBackDetail_cont_body_left_tab_cont_info">
                <p>课程简介</p>
                <p v-html="coursedescribetit"></p>
              </div>
            </div>
            <div class="streamingAllBackDetail_cont_body_left_tab_contB" v-show="stretab == 1">
              <ul>
                <li v-for="(item,index) in muldescribecont" :key="index">
                  <div class="streamingAllBackDetail_cont_body_left_tab_contB_top">
                    <span></span>
                    <span>{{item.Title}}</span>
                  </div>
                  <div class="streamingAllBackDetail_cont_body_left_tab_contB_bottom">
                    <i class="iconfont icon-zhibo"></i>
                    <p>
                      <span title="【直播】新盟教育-开班典礼">{{item.Title}}</span>
                      <span>({{item.StartDate}}-{{item.EndDate}})</span>
                    </p>
                  </div>
                </li>
              </ul>
            </div>
          </div>
          <div style="clear:both;"></div>
        </div>
      </div>
    </div>
    <FootBase></FootBase>
    
    <NaviRight></NaviRight>
  </div>
</template>

<script>
//juqery
import { pagination } from "../../../../../src/assets/mixin/data-table";
import moment from "moment";
import Swiper from "swiper";
import util from "../../../../assets/script/util";
export default {
  mixins: [pagination],
  data() {
    const VALIDATE_MOBILE_NO = (rule, value, callback) => {
      if (util.isNotEmpty(value) && !validate.validateMobile(value)) {
        callback(new Error("手机号需为11位数字"));
      } else {
        callback();
      }
    };
    return {
      // 是否展示1v1列表
      isShowovo: false,
      courmunuactive: "",
      courmunuovoactive: "",

      courmunulistdetail: [],
      courmunulist: [],
      // 一对一列表
      courmunulistovo: [],
      stretab: 0,
      coursedetail: {},
      coursedescribe: [],
      // 内容简介
      coursedescribetit: "",
      // 课程概括
      coursedescribecont: [],
      // 课程目录
      muldescribecont: [],

      // 关键词
      // 付费页面班级id传参
      classId: "",
      // 付费页面课程id传参
      courseId: "",

      mobileB: "",

      state: false,

      // 视频播放第一个id
      huifmenuopenId: "",
      // 视频播放第一个name
      huifmenuoname: "",
      // title赋值
      huifmenuTitle: "",

      isIsApply: ""
    };
  },
  methods: {
    // 点击普通回放标题赋值视频链接
    playback(OneToOne, OpenId, name, index) {
      this.$router.push({
        path: "/streaming/streamingAllBackDetail",
        query: {
          OpCourseId: "96B511D03E2CA8B1",
          Hftype: 2,
          type: 2,
          OpenId: OpenId
        }
      });
      this.courmunuactive = OpenId;
      // 加密完成
      if (OneToOne == false) {
        this.isShowovo = false;
        this.courmunuovoactive = "";
        this.$httphelper
          .post("/api/LmCourseApi/GetLiveBackPagePart", {
            Sign: "string",
            OpCataId: OpenId,
            OpAuthorId: localStorage.getItem("AuthorId")
          })
          .then(res => {
            this.huifmenuTitle = name;
            this.$refs.video.src = res.data.data.PlayBackPath;
            // 判断此视频是否有回放
            if (
              res.data.data.IsPlayBack == false ||
              res.data.data.PlayBackPath == ""
            ) {
              this.$message({
                message: "此视频暂无回放",
                type: "warning"
              });
              $("#streamingAllBackDetail_cont_main_video_video")
                .get(0)
                .pause();
              $(".streamingAllBackDetail_cont_main_video_video_cover").css(
                "display",
                "block"
              );
              $(".streamingAllBackDetail_cont_main_video_video_cover_btn").css(
                "display",
                "none"
              );
              $(
                ".streamingAllBackDetail_cont_main_video_video_cover_cover"
              ).css("display", "none");
            } else {
              $(".streamingAllBackDetail_cont_main_video_video_cover").css(
                "display",
                "none"
              );
              $("#streamingAllBackDetail_cont_main_video_video")
                .get(0)
                .play();
            }
          })
          .catch(err => {
            console.log(err);
          });
      } else {
        $("#streamingAllBackDetail_cont_main_video_video")
          .get(0)
          .pause();
        $(".streamingAllBackDetail_cont_main_video_video_cover").css(
          "display",
          "block"
        );
        $(".streamingAllBackDetail_cont_main_video_video_cover_btn").css(
          "display",
          "block"
        );
        $(".streamingAllBackDetail_cont_main_video_video_cover_cover").css(
          "display",
          "block"
        );
        if (this.isIsApply == true) {
          // 加密完成
          this.$httphelper
            .post("/api/LmCourseApi/GetLiveBackPagePart", {
              Sign: "string",
              OpCataId: OpenId,
              OpAuthorId: localStorage.getItem("AuthorId")
            })
            .then(res => {
              this.huifmenuTitle = name;
              this.$refs.video.src = res.data.data.PlayBackPath;
              // 判断此视频是否有回放
              if (
                res.data.data.IsPlayBack == false ||
                res.data.data.PlayBackPath == ""
              ) {
                this.$message({
                  message: "此视频暂无回放",
                  type: "warning"
                });
                $("#streamingAllBackDetail_cont_main_video_video")
                  .get(0)
                  .pause();
                $(".streamingAllBackDetail_cont_main_video_video_cover").css(
                  "display",
                  "block"
                );
                $(
                  ".streamingAllBackDetail_cont_main_video_video_cover_btn"
                ).css("display", "none");
                $(
                  ".streamingAllBackDetail_cont_main_video_video_cover_cover"
                ).css("display", "none");
              } else {
                $(".streamingAllBackDetail_cont_main_video_video_cover").css(
                  "display",
                  "none"
                );
                $("#streamingAllBackDetail_cont_main_video_video")
                  .get(0)
                  .play();
              }
            })
            .catch(err => {
              console.log(err);
            });
        } else {
          // 加密完成
          this.$httphelper
            .post("/api/LmCourseApi/GetOnetoOnePlayList", {
              Sign: "string",
              OpenId: OpenId
            })
            .then(res => {
              this.isShowovo = !this.isShowovo;
              this.courmunulistovo = res.data.data;
              if (this.isShowovo == false) {
                this.courmunuovoactive = "";
              }
            })
            .catch(err => {
              console.log(err);
            });
        }
      }
    },
    // 点击1v1回放标题赋值视频链接
    playovoback(item, index) {
      this.courmunuovoactive = index;
      this.$httphelper
        .post("/api/LmCourseApi/GetLiveOneToOnePart", {
          Sign: "string",
          OpenId: item.OpenId
        })
        .then(res => {
          this.huifmenuTitle = item.Title;
          this.$refs.video.src = res.data.data.PlayBackPath;
          // 判断此视频是否有回放
          if (res.data.data.PlayBackPath == "") {
            this.$message({
              message: "此视频暂无回放",
              type: "warning"
            });
            $("#streamingAllBackDetail_cont_main_video_video")
              .get(0)
              .pause();
            $(".streamingAllBackDetail_cont_main_video_video_cover").css(
              "display",
              "block"
            );
            $(".streamingAllBackDetail_cont_main_video_video_cover_btn").css(
              "display",
              "none"
            );
            $(".streamingAllBackDetail_cont_main_video_video_cover_cover").css(
              "display",
              "none"
            );
          } else {
            $(".streamingAllBackDetail_cont_main_video_video_cover").css(
              "display",
              "none"
            );
            $("#streamingAllBackDetail_cont_main_video_video")
              .get(0)
              .play();
          }
        })
        .catch(err => {
          console.log(err);
        });
    },
    // 播放视频
    playervideo() {
      this.playback(false, this.huifmenuopenId, this.huifmenuoname);
    },
    // 直播回放目录
    gethuifmenu() {
      // 加密完成
      this.$httphelper
        .post("/api/LmCourseApi/GetPlayBackPageList", {
          Sign: "string",
          OpCourseId: this.$route.query.OpCourseId,
          OpAuthorId: localStorage.getItem("AuthorId")
        })
        .then(res => {
          this.courmunulistdetail = res.data.data;
          this.isIsApply = res.data.data.IsApply;
          this.courmunulist = res.data.data.playBackListResults;
          this.huifmenuopenId = this.courmunulist[0].OpenId;
          this.huifmenuoname = this.courmunulist[0].Title;
        })
        .catch(e => {
          console.log(e);
        });
    },
    // 预约下期直播课
    streamingcourse() {
      this.$router.push({
        path: "/streaming/streamingHome"
      });
    },

    // 获取课程详情
    getcoursedetail() {
      // 加密完成
      this.$httphelper
        .post("/api/LmCourseApi/GetCourseParticular", {
          OpenId: this.$route.query.OpCourseId
        })
        .then(res => {
          this.coursedetail = res.data.data;
          this.classId = this.coursedetail.OpClassId;
          this.courseId = this.coursedetail.OpCourId;
          this.coursedetail.Price = this.coursedetail.Price.toFixed(2);
          // 报名截止日期
          var remindTime = this.coursedetail.EndApplyDate;
          // var remindTime = this.coursedetail.StartDate
          var str = remindTime.toString();
          str = str.replace("/-/g", "/");
          var finTime = new Date(str).getTime();

          // 当前时间
          let date = new Date();
          let datate = "";
          let y = date.getFullYear();
          let MM = date.getMonth() + 1;
          MM = MM < 10 ? "0" + MM : MM;
          let d = date.getDate();
          d = d < 10 ? "0" + d : d;
          let h = date.getHours();
          h = h < 10 ? "0" + h : h;
          let m = date.getMinutes();
          m = m < 10 ? "0" + m : m;
          let s = date.getSeconds();
          s = s < 10 ? "0" + s : s;
          datate = y + "-" + MM + "-" + d + " " + h + ":" + m + ":" + s;
          var strB = datate.toString();
          strB = strB.replace("/-/g", "/");
          var finTimeB = new Date(strB).getTime();

          if (finTimeB > finTime) {
            // 鼠标禁止点击事件
            $(".streamingAllBackDetail_cont_main_right_subpay").css({
              background: "#f4f4f4",
              color: "#999",
              cursor: "default",
              "pointer-events": "none"
            });
            $(".streamingAllBackDetail_cont_main_right_subpay span").html(
              "报名截止"
            );
            $(".streamingAllBackDetail_cont_main_left_cover_ifno p a").css({
              "pointer-events": "none",
              border: "none"
            });
            $(".streamingAllBackDetail_cont_main_left_cover_ifno p a").html(
              "报名截止"
            );
          }

          if (this.coursedetail.NumberPeople >= res.data.data.PerUpperlimit) {
            $(".streamingAllBackDetail_cont_main_right_subpay").css({
              background: "#f4f4f4",
              color: "#999",
              cursor: "default",
              "pointer-events": "none"
            });
            $(".streamingAllBackDetail_cont_main_right_subpay span").html(
              "报名已满"
            );
            $(".streamingAllBackDetail_cont_main_left_cover_ifno p a").css({
              "pointer-events": "none",
              border: "none"
            });
            $(".streamingAllBackDetail_cont_main_left_cover_ifno p a").html(
              "报名已满"
            );
          }

          // else if()
          // 课程概述
          this.$httphelper
            .post("/api/LmCourseApi/GetCourseGeneralize", {
              OpenId: this.coursedetail.OpClassId
            })
            .then(res => {
              this.coursedescribe = res.data.data;
              this.coursedescribetit = this.coursedescribe.Describe;
              this.coursedescribecont = this.coursedescribe.Experts;
              if (this.coursedescribecont.length < 4) {
                $(".swiper-button-next").css("display", "none");
                $(".swiper-button-prev").css("display", "none");
              } else {
                $(".swiper-button-next").css("display", "block");
                $(".swiper-button-prev").css("display", "block");
              }
            })
            .catch(e => {
              console.log(e);
            });
        })
        .catch(e => {
          console.log(e);
        });
    },
    getCoursemenu() {
      // 课程目录
      // 加密完成
      this.$httphelper
        .post("/api/LmCourseApi/GetCourseCatalogList", {
          OpenId: this.classId
        })
        .then(res => {
          this.muldescribecont = res.data.data;
        })
        .catch(e => {
          console.log(e);
        });
    },

    // 跳转专家详情
    tomrexpert(item) {
      this.$router.push({
        path: "/streaming/streamingexpert",
        query: {
          id: item.OpenId,
          courseId: this.courseId,
          type: this.$route.query.type,
          Hftype: this.$route.query.Hftype
        }
      });
    },

    // 根据id获取用户个人信息
    getIdInfo() {
      let userName = sessionStorage.getItem("userName");
      if (userName) {
        this.$httphelper
          .post("/api/LmUserApi/GetAuthorInfo", {
            OpenId: localStorage.getItem("AuthorId")
          })
          .then(res => {
            this.IsMember = res.data.data.IsMember;
            this.mobileB = res.data.data.Mobile;
            this.enddata = res.data.data.EndMemberDate;
            localStorage.setItem("Mobile", this.mobileB);
            localStorage.setItem("IsMember", this.IsMember);
            localStorage.setItem("EndMemberDate", this.enddata);
          })
          .catch(err => {
            console.log(err);
          });
      }
    }
  },
  // 解决轮播不能滚动问题
  updated() {
    this.$nextTick(function() {
      new Swiper(".swiper-container", {
        initialSlide: 0,
        slidesPerView: 3.6,
        spaceBetween: 20,
        pagination: {
          el: ".swiper-pagination",
          clickable: true,
          type: "progressbar"
        },
        nextButton: ".swiper-button-next",
        prevButton: ".swiper-button-prev"
      });
    });
  },
  created() {
    this.getcoursedetail();
    this.getIdInfo();

    this.gethuifmenu();

    if (this.$route.query.Hftype == 2) {
      this.playback(
        false,
        this.$route.query.OpenId,
        this.$route.query.title,
        this.$route.query.index
      );
    }
  },
  mounted() {
    // 判断视频播放是否结束并且判断是否是报名用户，反则报名观看全程
    if (!this.state) {
      document.getElementById(
        "streamingAllBackDetail_cont_main_video_video"
      ).loop = false; // 不设置视频循环播放
      document
        .getElementById("streamingAllBackDetail_cont_main_video_video")
        .addEventListener(
          "ended",
          () => {
            //该视频播放是否已结束
            this.state = true;
          },
          false
        );
    }
  }
};
</script>

<style lang="less" scoped>
#streamingAllBackDetail {
  width: 100%;
  .streamingAllBackDetail_cont {
    width: 100%;
    height: 100%;
    .streamingAllBackDetail_cont_crumbs {
      width: 1140px;
      height: 20px;
      margin: 0 auto;
      position: relative;
      margin-top: 28px;
      text-align: left;
      line-height: 20px;
      padding-left: 10px;
      span:nth-child(1) a,
      span:nth-child(3) a,
      span:nth-child(4) a {
        color: #000000;
        font-size: 16px;
        font-weight: bold;
        cursor: pointer;
      }
      i {
        color: #767c82;
        font-size: 18px;
        margin-left: 10px;
        font-weight: bold;
      }
      span:nth-child(5),
      span:nth-child(6) {
        color: #000;
        font-size: 16px;
        margin-left: 10px;
        font-weight: bold;
        cursor: pointer;
        a {
          color: #000;
        }
      }
      span:nth-child(7),
      span:nth-child(8),
      span:nth-child(9) {
        color: #003c80;
        font-size: 16px;
        margin-left: 10px;
        font-weight: bold;
        cursor: pointer;
        a {
          color: #003c80;
        }
        /deep/p {
          display: inline-block;
        }
      }
    }
    .streamingAllBackDetail_cont_main {
      width: 1200px;
      margin: 0 auto;
      position: relative;
      margin-top: 38px;
      padding-bottom: 30px;
      height: 380px;
      .streamingAllBackDetail_cont_main_left {
        width: 600px;
        height: 338px;
        float: left;
        position: relative;
        img {
          display: inline-block;
          width: 100%;
          height: 100%;
        }
        .streamingAllBackDetail_cont_main_left_cover {
          width: 100%;
          height: 100%;
          background: rgba(21, 21, 27, 0.7);
          position: absolute;
          top: 0;
          left: 0;
          .streamingAllBackDetail_cont_main_left_cover_ifno {
            width: 100%;
            padding: 0 20px;
            box-sizing: border-box;
            position: absolute;
            top: 50%;
            margin-top: -39px;
            p {
              text-align: center;
              color: #fff;
            }
            p:nth-child(1) {
              font-size: 24px;
            }
            p:nth-child(2) {
              font-size: 16px;
              margin-top: 14px;
              a {
                display: inline-block;
                color: #fff;
                font-size: 16px;
                display: inline-block;
                border-bottom: 1px solid #fff;
                padding-bottom: 2px;
                margin-left: 25px;
              }
            }
          }
        }
        .streamingAllBackDetail_cont_main_left_promise {
          font-size: 14px;
          color: #999;
          height: 26px;
          line-height: 26px;
          i {
            font-size: 25px;
            color: #8ac2f3;
            position: relative;
            top: 5px;
          }
          span {
            cursor: pointer;
          }
        }
      }
      .streamingAllBackDetail_cont_main_right {
        width: 570px;
        float: right;
        .streamingAllBackDetail_cont_main_right_tit {
          font-size: 22px;
          display: inline-block;
          overflow: hidden;
          text-overflow: ellipsis;
          -webkit-line-clamp: 1;
          line-clamp: 1;
          white-space: nowrap;
          a {
            color: #333;
            font-size: 22px;
          }
          span {
            font-size: 16px;
            color: #999;
            margin-left: 10px;
          }
        }
        .streamingAllBackDetail_cont_main_right_paycount {
          color: #999;
          font-size: 15px;
          margin-top: 10px;
          i {
            width: 1px;
            height: 10px;
            border-right: 1px solid #999;
            margin-left: 20px;
            margin-right: 20px;
          }
          span {
            background: #eee;
            border-radius: 9px;
            line-height: 16px;
            padding: 5px 6px;
            display: inline-block;
            font-size: 14px;
            line-height: 1;
            color: #777;
            transform: scale(0.82);
          }
        }
        .streamingAllBackDetail_cont_main_right_date {
          border: 1px solid #e5e5e5;
          padding: 5px 15px 6px;
          position: relative;
          margin-top: 32px;
          height: 49px;
          line-height: 42px;
          .hidden-clip {
            clip: inherit;
            top: -20px;
            font-size: 16px;
            background: #fff;
            line-height: 35px;
            padding: 0 5px;
            position: absolute;
          }
          p {
            color: #333;
            font-size: 15px;
          }
        }
        .streamingAllBackDetail_cont_main_right_price {
          width: 100%;
          margin-top: 18px;
          border: 1px solid #003c80;
          .streamingAllBackDetail_cont_main_right_price_top {
            background-color: #003c80;
            height: 40px;
            line-height: 40px;
            padding-left: 15px;
            span {
              font-size: 18px;
              color: #fff;
            }
          }
          .streamingAllBackDetail_cont_main_right_price_bottom {
            width: 100%;
            ul {
              width: 100%;
              li {
                list-style: none;
                padding: 10px 16px 10px 16px;
                span:nth-child(1) {
                  font-size: 23px;
                  color: #003c80;
                  position: relative;
                  top: 1px;
                  cursor: pointer;
                }
                span:nth-child(2) {
                  font-size: 16px;
                  color: #5d7283;
                  margin-left: 10px;
                  position: relative;
                  top: -1px;
                  cursor: pointer;
                  text-decoration: line-through;
                }
              }
            }
          }
        }
        .streamingAllBackDetail_cont_main_right_subpay {
          float: left;
          width: 120px;
          height: 40px;
          line-height: 40px;
          background: #003c80;
          color: #fff;
          font-size: 18px;
          text-align: center;
          margin-top: 30px;
          cursor: pointer;
          span {
            display: block;
          }
        }
        .streamingAllBackDetail_cont_main_right_subpay:hover {
          background: #ff4343;
        }
        .streamingAllBackDetail_cont_main_right_zixu {
          width: 120px;
          height: 40px;
          line-height: 40px;
          border: 1px solid #003c80;
          color: #003c80;
          font-size: 18px;
          text-align: center;
          margin-top: 30px;
          cursor: pointer;
          margin-left: 25px;
          float: left;
        }
        .streamingAllBackDetail_cont_main_right_zixuB {
          width: 120px;
          height: 41px;
          line-height: 41px;
          border: 1px solid #003c80;
          color: #003c80;
          font-size: 18px;
          text-align: center;
          margin-top: 30px;
          cursor: pointer;
          margin-left: 25px;
          float: left;
          background-size: cover;
        }
        .streamingAllBackDetail_cont_main_right_zixuB:hover {
          span {
            font-weight: bold;
          }
        }
        .streamingAllBackDetail_cont_main_right_zixu_erweima {
          width: 187px;
          height: 103px;
          border: 1px solid #f4f4f4;
          float: right;
          margin-right: 16%;
          margin-top: 6px;
          background: #fff;
          img {
            width: 52%;
            display: inherit;
            height: 100%;
            margin: 0 auto;
            float: left;
          }
          span {
            float: right;
          }
          span:nth-child(2) {
            margin-top: 32px;
            margin-right: 13%;
          }
          span:nth-child(4) {
            margin-right: 6%;
            margin-top: 6px;
          }
        }
      }
    }

    .streamingAllBackDetail_contB {
      width: 100%;
      height: auto;
      padding-bottom: 50px;
      position: relative;
      .academicCont_crumbs {
        width: 1140px;
        height: 20px;
        margin: 0 auto;
        position: relative;
        margin-top: 28px;
        text-align: left;
        line-height: 20px;
        padding-left: 10px;
        span:nth-child(1) a {
          color: #000000;
          font-size: 16px;
          font-weight: bold;
          cursor: pointer;
        }
        i {
          color: #767c82;
          font-size: 18px;
          margin-left: 10px;
          font-weight: bold;
        }
        span:nth-child(3) {
          color: #003c80;
          font-size: 16px;
          margin-left: 10px;
          font-weight: bold;
          cursor: pointer;
        }
      }
      .streamingAllBackDetail_cont_main {
        width: 1200px;
        height: 582px;
        margin: 0 auto;
        margin-top: 26px;
        .streamingAllBackDetail_cont_main_video {
          width: 100%;
          height: 490px;
          .streamingAllBackDetail_cont_main_video_video {
            width: 870px;
            height: 100%;
            float: left;
            position: relative;
            border: 1px solid #e9e9e9;
            border-right: none;
            border-bottom: none;
            video {
              width: 100%;
              height: 100%;
            }
            .streamingAllBackDetail_cont_main_video_video_cover {
              .streamingAllBackDetail_cont_main_video_video_cover_cover {
                width: 100%;
                height: 100%;
                background: rgba(0, 0, 0, 0.6);
                position: absolute;
                top: 0;
                left: 0;
              }
              .streamingAllBackDetail_cont_main_video_video_cover_img {
                width: 100%;
                height: 100%;
                background: url("../../../../../static/zb/zjhb.png")
                  no-repeat;
                background-size: cover;
                position: absolute;
                top: 0;
                left: 0;
              }
              .streamingAllBackDetail_cont_main_video_video_cover_btn {
                width: 96px;
                height: 96px;
                border-radius: 50%;
                color: #fff;
                text-align: center;
                line-height: 109px;
                background-color: #08cb6a;
                background-color: #23b8ff;
                position: absolute;
                z-index: 1;
                left: 50%;
                top: 50%;
                -webkit-transform: translate(-50%, -50%);
                -ms-transform: translate(-50%, -50%);
                transform: translate(-50%, -50%);
                cursor: pointer;
                i {
                  margin-left: 6px;
                  font-size: 40px;
                  color: #fff;
                  position: relative;
                  top: -5px;
                  left: 2px;
                }
              }
              .streamingAllBackDetail_cont_main_video_video_cover_btn:hover {
                background-color: #12a7ff;
              }
            }
          }
          .streamingAllBackDetail_cont_main_video_menu {
            width: 330px;
            height: 100%;
            float: right;
            background: #131313;
            overflow: hidden;
            overflow-y: auto;
            .streamingAllBackDetail_cont_main_video_menu_one {
              padding: 8px;
              width: 100%;
              .courmunuactive {
                p {
                  span:nth-child(1) {
                    background: #23b8ff;
                    color: #333;
                  }
                  span:nth-child(2) {
                    color: #23b8ff !important;
                  }
                }
              }
              li:hover {
                p {
                  span:nth-child(1) {
                    background: #23b8ff;
                    color: #333;
                  }
                  span {
                    color: #23b8ff;
                  }
                }
              }
              li {
                list-style: none;
                width: 94%;
                margin: 0 auto;
                border-bottom: 1px solid #2a2a2a;
                padding: 15px 0;
                cursor: pointer;
                .streamingAllBackDetail_cont_main_video_menu_left {
                  display: inline-block;
                  width: 35px;
                  height: 20px;
                  background: #777777;
                  text-align: center;
                  line-height: 20px;
                  color: #333;
                  font-weight: bold;
                  border-radius: 3px;
                  font-size: 14px;
                }
                span:nth-child(2) {
                  float: right;
                  width: 85%;
                  color: #c7c7c7;
                  font-size: 14px;
                  overflow: hidden;
                  text-overflow: ellipsis;
                  -webkit-line-clamp: 1;
                  line-clamp: 1;
                  white-space: nowrap;
                }
              }
            }
            .streamingAllBackDetail_cont_main_video_menu_two {
              padding: 8px;
              width: 76%;
              margin-left: 7%;
              margin-top: -15px;
              .courmunuovoactive {
                p {
                  span:nth-child(1) {
                    background: #23b8ff;
                    color: #333;
                  }
                  span:nth-child(2) {
                    color: #23b8ff !important;
                  }
                }
              }
              li:hover {
                p {
                  span:nth-child(1) {
                    background: #23b8ff;
                    color: #333;
                  }
                  span {
                    color: #23b8ff;
                  }
                }
              }
              li {
                list-style: none;
                width: 94%;
                margin: 0 auto;
                border-bottom: 1px solid #2a2a2a;
                padding: 15px 0;
                cursor: pointer;
                .streamingAllBackDetail_cont_main_video_menu_left {
                  display: inline-block;
                  width: 35px;
                  height: 20px;
                  background: #777777;
                  text-align: center;
                  line-height: 20px;
                  color: #333;
                  font-weight: bold;
                  border-radius: 3px;
                  font-size: 14px;
                }
                span:nth-child(2) {
                  float: right;
                  width: 78%;
                  color: #c7c7c7;
                  font-size: 14px;
                  overflow: hidden;
                  text-overflow: ellipsis;
                  -webkit-line-clamp: 1;
                  line-clamp: 1;
                  white-space: nowrap;
                }
              }
            }
          }
        }
        .streamingAllBackDetail_cont_main_info {
          width: 100%;
          height: 92px;
          padding: 14px 16px;
          background-color: #232323;
          box-sizing: border-box;
          .streamingAllBackDetail_cont_main_info_tit {
            width: 850px;
            height: 64px;
            float: left;
            p:nth-child(1) {
              font-size: 22px;
              span:nth-child(1) {
                color: #fff;
              }
              span:nth-child(2) {
                color: #ff4f23;
              }
            }
            p:nth-child(2) {
              margin-top: 3px;
              color: #23b8ff;
              font-size: 20px;
              span {
                display: inline-block;
                margin-right: 32px;
              }
            }
          }
          .streamingAllBackDetail_cont_main_info_btn {
            width: 293px;
            height: 50px;
            float: right;
            background: #23b8ff;
            line-height: 50px;
            text-align: center;
            color: #fff;
            font-size: 18px;
            cursor: pointer;
            margin-top: 9px;
          }
          .streamingAllBackDetail_cont_main_info_btn:hover {
            background-color: #12a7ff;
          }
        }
      }
    }

    .streamingAllBackDetail_cont_body {
      width: 100%;
      height: 100%;
      background: #f4f4f4;
      padding-bottom: 50px;
      .streamingAllBackDetail_cont_body_main {
        width: 1200px;
        height: auto;
        margin: 0 auto;
        position: relative;
      }
      .streamingAllBackDetail_cont_body_left {
        width: 1200px;
        height: auto;
        background: #fff;
        float: left;
        padding: 0 20px 20px;
        margin-top: 20px;
        .streamingAllBackDetail_cont_body_left_tab {
          line-height: 55px;
          border-bottom: 1px solid #f6f6f6;
          ul {
            width: 100%;
            li:hover {
              a {
                color: #003c80;
              }
            }
            .stretab {
              a {
                color: #003c80;
              }
              border-bottom: 5px solid #003c80;
            }
            li {
              list-style: none;
              width: 80px;
              height: 45px;
              text-align: center;
              line-height: 45px;
              font-size: 16px;
              float: left;
              cursor: pointer;
              margin-right: 40px;
              a {
                display: inline-block;
                width: 100%;
                height: 100%;
                color: #333;
              }
            }
          }
        }
        .streamingAllBackDetail_cont_body_left_tab_cont {
          width: 100%;
          margin-top: 23px;
          .streamingAllBackDetail_cont_body_left_tab_cont_tet {
            font-size: 16px;
            line-height: 2;
            margin-bottom: 10px;
            color: #333;
            font-weight: bold;
          }
          .streamingAllBackDetail_cont_body_left_tab_cont_swiper:hover
            .swiper-button-next {
            display: block !important;
          }
          .streamingAllBackDetail_cont_body_left_tab_cont_swiper:hover
            .swiper-button-prev {
            display: block !important;
          }
          .streamingAllBackDetail_cont_body_left_tab_cont_swiper {
            width: 100%;
            height: 113px;
            .swiper-container {
              width: 100%;
              height: 100%;
            }
            .swiper-wrapper {
              padding-left: 30px;
              padding-right: 30px;
            }
            /deep/.swiper-slide {
              width: 300px !important;
              text-align: center;
              font-size: 18px;
              background: #fff;
              cursor: pointer;

              /* Center slide text vertically */
              display: -webkit-box;
              display: -ms-flexbox;
              display: -webkit-flex;
              display: flex;
              -webkit-box-pack: center;
              -ms-flex-pack: center;
              -webkit-justify-content: center;
              justify-content: center;
              -webkit-box-align: center;
              -ms-flex-align: center;
              -webkit-align-items: center;
              align-items: center;
            }
            .swiper-button-next,
            .swiper-button-prev {
              display: none !important;
              z-index: 1;
              position: absolute;
              top: 59%;
              transform: translateY(-50%);
              display: block;
              width: 25px;
              height: 50px;
              background-color: #000;
              color: #fff;
              opacity: 0.4;
              border-radius: 25px 0 0 25px;
              right: 0;
              background-image: none;
              i {
                line-height: 52px;
                font-size: 21px;
                position: relative;
                left: 6px;
              }
            }
            .swiper-button-prev {
              left: 0;
              border-radius: 0px 25px 25px 0px;
              i {
                left: 0;
              }
            }
            .streamingAllBackDetail_cont_body_left_tab_cont_swiper_info {
              width: 300px;
              height: 97px;
              .streamingAllBackDetail_cont_body_left_tab_cont_swiper_info_img {
                width: 96px;
                height: 96px;
                border-radius: 50%;
                float: left;
                margin-right: 20px;
                overflow: hidden;
                img {
                  width: 100%;
                  height: 100%;
                }
              }
              .streamingAllBackDetail_cont_body_left_tab_cont_swiper_info_cont {
                float: right;
                width: 181px;
                height: 100%;
                p:nth-child(1) {
                  color: #003c80;
                  text-align: left;
                  overflow: hidden;
                  text-overflow: ellipsis;
                  display: -webkit-box;
                  -webkit-line-clamp: 1;
                  line-clamp: 1;
                  /* autoprefixer: off */
                  -webkit-box-orient: vertical;
                  /* autoprefixer: on */
                  font-size: 18px;
                  a {
                    color: #003c80;
                  }
                }
                p:nth-child(2) {
                  text-align: justify;
                  color: #333;
                  overflow: hidden;
                  text-overflow: ellipsis;
                  display: -webkit-box;
                  -webkit-line-clamp: 3;
                  line-clamp: 3;
                  /* autoprefixer: off */
                  -webkit-box-orient: vertical;
                  /* autoprefixer: on */
                  font-size: 14px;
                  a {
                    color: #333;
                  }
                }
              }
            }
          }
          .streamingAllBackDetail_cont_body_left_tab_cont_info {
            margin-top: 28px;
            p:nth-child(1) {
              font-size: 16px;
              color: #000;
              line-height: 26px;
              font-weight: bold;
            }
            p:nth-child(2) {
              width: 100%;
              color: #333;
              font-size: 15px;
              line-height: 26px;
              margin-top: 17px;
            }
          }
        }
        .streamingAllBackDetail_cont_body_left_tab_contB {
          width: 100%;
          margin-top: 20px;
          ul {
            li {
              width: 100%;
              height: 102px;
              list-style: none;
              margin-bottom: 10px;
              .streamingAllBackDetail_cont_body_left_tab_contB_top {
                width: 100%;
                height: 45px;
                line-height: 45px;
                span:nth-child(1) {
                  width: 42px;
                  text-align: left;
                  font-size: 20px;
                  color: #000;
                  font-weight: 700;
                  float: left;
                  margin-left: 15px;
                }
                span:nth-child(2) {
                  font-size: 16px;
                  color: #000;
                  font-weight: 700;
                }
              }
              .streamingAllBackDetail_cont_body_left_tab_contB_bottom {
                width: 100%;
                height: 52px;
                background: #f4f4f4;
                cursor: pointer;
                position: relative;
                i {
                  font-size: 27px;
                  position: absolute;
                  left: 0;
                  top: 7px;
                  width: 53px;
                  text-align: center;
                  color: #a3d2f8;
                }
                p {
                  font-size: 16px;
                  color: #333;
                  line-height: 50px;
                  margin-left: 6%;
                  font-weight: bold;
                  span:nth-child(2) {
                    color: #999;
                    margin-left: 10px;
                  }
                }
              }
              .streamingAllBackDetail_cont_body_left_tab_contB_bottom:hover {
                background: #eeeeee;
                i {
                  color: #003c80;
                }
              }
            }
          }
        }
      }
    }
  }
  .regisCon_div {
    display: inline-block;
    width: 42%;
    height: 32px;
    border: 1px solid #cbcbcb;
    margin-bottom: 19px;
    border-radius: 5px;
    position: relative;
    margin-left: 6%;
    i {
      color: #cbcbcb;
      position: relative;
      top: 5px;
      left: 9px;
    }
    .el-form-item {
      position: relative;
      width: 100%;
      height: 32px !important;
      /deep/.el-input__inner {
        border: none;
        position: relative;
        top: -2px;
        height: 30px;
      }
    }
    .regis_hq {
      width: 88px;
      height: 31px;
      background: #003c80;
      text-align: center;
      color: #fff;
      font-size: 16px;
      cursor: pointer;
      position: absolute;
      right: -2px;
      top: 0;
      border-radius: 0 5px 5px 0;
      padding: 8px 3px;
    }
  }
  /deep/.el-dialog__header {
    border-bottom: 1px solid #efefef !important;
  }
  .dialogttercoubaoming {
    /deep/.el-dialog__headerbtn {
      display: none;
    }
    /deep/.el-dialog {
      width: 46%;
      margin-top: 8vh !important;
    }
    /deep/.el-col-12 {
      width: 100%;
    }
    /deep/.el-form-item__label {
      font-size: 15px;
    }
    /deep/.el-dialog__title {
      text-align: center;
      margin-left: 42%;
      font-size: 25px;
      font-weight: bold;
    }
    /deep/.el-input {
      width: 80%;
    }
    /deep/.el-dialog__body {
      width: 85%;
      margin: 0 auto;
    }
    /deep/.el-select {
      width: 83%;
      /deep/.el-input {
        width: 96%;
      }
    }
  }
  .dialogttercou {
    /deep/.el-dialog {
      width: 50%;
    }
    /deep/.el-dialog__title {
      text-align: center;
      margin-left: 43%;
      font-size: 25px;
      font-weight: bold;
    }
    p {
      font-size: 18px;
      line-height: 37px;
      text-align: justify;
      margin-bottom: 10px;
      color: #000;
    }
    p:nth-child(1) {
      span {
        font-weight: bold;
      }
    }
    div {
      width: 200px;
      height: 200px;
      margin: 0 auto;
      img {
        display: inline-block;
        width: 100%;
        height: 100%;
      }
    }
  }
}
@media screen and (min-width: 1010px) {
  .moexpert {
    display: none;
  }
}
@media screen and (max-width: 1010px) {
  .streamingAllBackDetail {
    margin-top: 60px;
  }
  .streamingAllBackDetail_cont_main_right_subpay {
    width: 28% !important;
  }
  .streamingAllBackDetail_cont_main_right_zixuB {
    width: 28% !important;
  }
  .streamingAllBackDetail_cont_main_right_zixu {
    width: 28% !important;
    margin-left: 19px;
  }
  .wepcexpert {
    display: none;
  }
  /deep/.el-dialog {
    width: 84% !important;
  }
  .streamingAllBackDetail_cont {
    margin-bottom: 86px;
    .streamingAllBackDetail_contB {
      padding-bottom: 0px !important;
    }
    .streamingAllBackDetail_cont_crumbs {
      display: none;
    }
    .streamingAllBackDetail_cont_main {
      width: 100% !important;
      height: auto !important;
      .streamingAllBackDetail_cont_main_video {
        width: 100% !important;
        height: auto !important;
        .streamingAllBackDetail_cont_main_video_video {
          width: 100% !important;
          height: auto !important;
          .streamingAllBackDetail_cont_main_video_video_cover {
            .streamingAllBackDetail_cont_main_video_video_cover_btn {
              width: 48px !important;
              height: 48px !important;
              i {
                font-size: 25px !important;
                top: -29px !important;
                left: 0px !important;
              }
            }
          }
        }
      }
      .streamingAllBackDetail_cont_main_info {
        display: none;
      }
      .streamingAllBackDetail_cont_main_video_menu {
        width: 100% !important;
      }

      .streamingAllBackDetail_cont_main_left {
        width: 100% !important;
        height: 234px !important;
        float: none !important;
        .streamingAllBackDetail_cont_main_left_promise {
          display: none;
        }
        .streamingAllBackDetail_cont_main_left_cover_ifno {
          top: 42% !important;
          p:nth-child(1) {
            font-size: 20px !important;
          }
        }
      }
      .streamingAllBackDetail_cont_main_right {
        width: 94% !important;
        margin: 0 auto;
        float: none !important;
        margin-top: 15px;
        .streamingAllBackDetail_cont_main_right_tit {
          width: 100% !important;
        }
        .streamingAllBackDetail_cont_main_right_paycount {
          span {
            margin-bottom: 6px;
          }
        }
        .streamingAllBackDetail_cont_main_right_date {
          height: auto !important;
        }
      }
    }
  }
  .streamingAllBackDetail_cont_body {
    .streamingAllBackDetail_cont_body_main {
      width: 100% !important;
      margin: 0 auto;
      .streamingAllBackDetail_cont_body_left {
        width: 100% !important;
        .moexpert {
          width: 100%;
          ul {
            width: 100%;
            height: 100%;
            li {
              list-style: none;
              width: 50% !important;
              float: left;
              margin-right: 0 !important;
              // height: 284px !important;
              border: none !important;
              padding: 15px 7px;
              margin-bottom: 12px;
              .moexpert_exrtpimg {
                width: 100%;
                // height: 224px;
                height: 152px;
                img {
                  width: 100%;
                  height: 100%;
                }
              }
              p:nth-child(2) {
                color: #003c80;
                text-align: left;
                overflow: hidden;
                text-overflow: ellipsis;
                display: -webkit-box;
                -webkit-line-clamp: 1;
                line-clamp: 1;
                /* autoprefixer: off */
                -webkit-box-orient: vertical;
                /* autoprefixer: on */
                font-size: 18px;
                margin-top: 5px;
                a {
                  color: #003c80;
                }
              }
              p:nth-child(3) {
                text-align: justify;
                color: #333;
                overflow: hidden;
                text-overflow: ellipsis;
                display: -webkit-box;
                -webkit-line-clamp: 3;
                line-clamp: 3;
                /* autoprefixer: off */
                -webkit-box-orient: vertical;
                /* autoprefixer: on */
                font-size: 14px;
                a {
                  color: #333;
                }
              }
            }
          }
        }
        .streamingAllBackDetail_cont_body_left_tab_contB {
          ul {
            li {
              height: auto !important;
              .streamingAllBackDetail_cont_body_left_tab_contB_bottom {
                height: auto !important;
                p {
                  margin-left: 18% !important;
                }
              }
            }
          }
        }
      }
    }
  }
}

::-webkit-scrollbar {
  width: 8px;
  height: 16px;
}

/*定义滚动条轨道 内阴影+圆角*/
::-webkit-scrollbar-track {
  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
  border-radius: 10px;
  // background-color: #F5F5F5;
}

/*定义滑块 内阴影+圆角*/
::-webkit-scrollbar-thumb {
  border-radius: 10px;
  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
  background-color: #555;
}
</style>
<style>
@media screen and (max-width: 1010px) {
  .message-logout {
    width: 80% !important;
  }
}
</style>